<meta charset="UTF-8">
<style>
    * {
        margin: 0px;
        padding: 0px;
    }

    ul, li {
        list-style: none;
    }

    .tree {
        margin: 50px;
    }

    .tree ul {

        transition:all .3s;
        height:0px;
        overflow:hidden;
    }

    .tree li {
        height:30px;
        transition:all .5s;
        cursor: pointer;
        padding-left: 30px;
        background-position-x: 12px;
        background-position-y:7px;
    }

    .jiabg {
        background: url(jia.png) no-repeat 12px 7px;
    }

    .jianbg {
        background: url(jian.png) no-repeat 12px 7px;
    }
</style>
<script>
    //网页加载完成后执行start函数
    window.onload = start;

    function start() {
        var trees = document.getElementsByClassName("tree");

        for(var i=0;i<trees.length;i++){
            installTree(trees[i]);
        }
    }

    function installTree(tree){
        //获得tree下面的所有li元素
        var lis = tree.getElementsByTagName("li");

        //对于这些li元素来说
        for (var i = 0; i < lis.length; i++) {
            //将这些li元素的背景设置为加号背景
            lis[i].className = "jiabg";
            //寻找该li下面有无ul子元素
            var ulEle = lis[i].getElementsByTagName("ul")[0];

            //如果不存子元素
            if (!ulEle) {
                //则将背景赋值为空，去除背景
                lis[i].className = "";
            } else {
                //对于有子元素的li来说
                lis[i].onclick = function (e) {
                    //取消事件冒泡
                    e.stopPropagation();
                    var ulEle = this.getElementsByTagName("ul")[0];
                    this.style.height = "120px";
                    ulEle.style.height = "90px";
                    //如果该li下的ul为显示状态
                    if (ulEle.style.display == "block") {
                        //则将该ul隐藏
                        ulEle.style.display = "none";
                        //并将该li的背景设置为加号
                        this.className = "jiabg";
                    } else {//否则
                        //将显示ul
                        ulEle.style.display = "block";
                        // 并将该li的背景设置为减号
                        this.className = "jianbg";
                    }
                };
            }
        }
    }
</script>
<ul class="tree">
    <li>1
        <ul>
            <li>1.1
                <ul>
                    <li>1.1.1
                        <ul>
                            <li>1.1.1.1</li>
                            <li>1.1.1.2</li>
                            <li>1.1.1.3</li>
                        </ul>
                    </li>
                    <li>1.1.2
                        <ul>
                            <li>1.1.2.1</li>
                            <li>1.1.2.2</li>
                            <li>1.1.2.3</li>
                        </ul>
                    </li>
                    <li>1.1.3</li>
                </ul>
            </li>
            <li>1.2</li>
            <li>1.3</li>
        </ul>

    </li>


    <li>2
        <ul>
            <li>2.1
                <ul>
                    <li>2.1.1
                        <ul>
                            <li>2.1.1.1</li>
                            <li>2.1.1.2</li>
                            <li>2.1.1.3</li>
                        </ul>
                    </li>
                    <li>2.1.2</li>
                    <li>2.1.3</li>
                </ul>
            </li>
            <li>2.2</li>
            <li>2.3</li>
        </ul>

    </li>


    <li>3
        <ul>
            <li>3.1
                <ul>
                    <li>3.1.1
                        <ul>
                            <li>3.1.1.1</li>
                            <li>3.1.1.2</li>
                            <li>3.1.1.3</li>
                        </ul>
                    </li>
                    <li>3.1.2</li>
                    <li>3.1.3</li>
                </ul>
            </li>
            <li>3.2</li>
            <li>3.3</li>
        </ul>

    </li>
</ul>

